<template>
  <section class="settting-wrapper">
    <header class="setting-header">
      <h4 class="title" :data-skinType="skinType">主题颜色配置</h4>
      <span class="detail">请为您的企业LOGO搭配一个主题颜色，直接点击色卡即可更改主题色，切换后，自动保存。</span>
    </header>

    <div class="color-list-box">
      <a class="color-item" v-for="(item, index) in colorList" :key="index" :style="{'background-color': '#' + item}" :class="{'has-border': item === 'FFFFFF', active: theme === item}" @click.prevent="handleChangeTheme(item)">{{index === 0 ? '默认色' : ''}}</a>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import { mapState, mapMutations } from 'vuex'

import theme from '@/mixins/theme.js'
import utils from '@/mixins/utils.js';

const ORIGINAL_THEME = '5995D8'
export default {
  name: 'setTheme',

  mixins: [theme,utils],

  data () {
    return {
      chalk: '', // content of theme-chalk css
      docs: '', // content of docs css
      theme: ORIGINAL_THEME,
      colorList: ['5995D8', 'D81D1D', 'F57900', 'EDCD1B', '62B03E', '00C0BC', '4043CF', '8947BF', '413B3B']
    }
  },

  computed: {
    skinType () {
      let skinType = this.$store.state.skinType
      if (this.theme !== skinType) {
        if (skinType && this.colorList.indexOf(skinType) > -1) {
          this.theme = skinType
        } else {
          this.theme = ORIGINAL_THEME
        }
      }
      return skinType
    }
  },

  methods: {
    ...mapMutations({
      setSkinType: 'setSkinType'
    }),

    handleChangeTheme (item) {
      this.theme = item
      this.saveThemeFn(item)
    },

    saveThemeFn (_theme) {
      let _skinTheme = this.getChangedDemical(_theme, 16, 10)
      let params = {
        skinTheme: _skinTheme,
      }
      API.fetchPost("/skin/skin/save.do", params)
        .then(data => {
          this.setSkinType(_theme)
          this.showToast("保存成功", 1);
        }, err => {
          this.showToast("保存失败", 2);
        })
    }
  },

  watch: {
    theme (val, oldVal) {
      this.watchTheme(val, oldVal)
    }
  }
}
</script>

<style lang="less" scoped>
@grey99: #999999;
@grey97: #979797;
@green: #83CF2E;
.setting-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;

  .title {
    display: inline-block;
    margin-right: 18px;
  }

  .detail {
    color: @grey99;
  }
}

.color-list-box {
  display: flex;
  justify-content: space-between;
}
.color-item {
  display: inline-block;
  width: 90px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  letter-spacing: .5px;
  cursor: pointer;

  &.has-border {
    border: 1px solid @grey97;
  }

  &.active {
    line-height: 42px;
    border: 4px solid @green;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: -10px;
      top: -10px;
      display: inline-block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: url('../../../assets/img/ic_opened_addvaule.svg') no-repeat center center;
      box-shadow: 4px 3px 4px 0 rgba(0,0,0,0.30);
    }

    &::before {
      content: '';
      position: absolute;
      top: -9px;
      left: -9px;
      right: -9px;
      bottom: -9px;
      display: inline-block;
      background-color: transparent;
      border-radius: 8px;
      border: 5px solid rgba(111,200,13,0.30);
    }
  }
}
</style>
